import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button, Divider, Image, Input, message } from 'antd';
import styles from './index.less';
import React, { useCallback, useState } from 'react';
import { EyeOutlined } from '@ant-design/icons';
import { generateShortUrlUsingPost } from '@/services/sutongapi-backend/shortLinkController';
import debounce from 'lodash/debounce';

const ShortLink: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
  const [enable, setEnable] = useState(false);
  const [resShow, setResShow] = useState(false);
  const [data, setData] = useState<API.ShortLinkVo>();

  const debouncedSave = useCallback(
    debounce((value) => {
      const regex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
      if (!regex.test(value)) {
        message.error('请输入 http:// 或 https:// 开头的网址');
        setEnable(false);
        return;
      }
      setEnable(true);
    }, 700), // 700ms的防抖时间
    [],
  );

  const handleChange = (e: any) => {
    setInputValue(e.target.value);
    debouncedSave(e.target.value);
  };

  const handleClick = async () => {
    const res = await generateShortUrlUsingPost({ longUrl: inputValue });
    setData(res.data);
    setResShow(true);
  };

  return (
    <>
      <ProCard
        title="API开放平台"
        headStyle={{ textAlign: 'center' }}
        bodyStyle={{ fontSize: '15px' }}
        bordered
        direction="column"
        layout="center"
      >
        <h2>苏瞳短链接</h2>
        <h3>简单易用的渠道短链接统计工具</h3>
      </ProCard>

      <PageContainer header={{ title: '' }}>
        <ProCard layout="center" direction="column">
          <div className={styles['input']}>
            <Input
              variant="borderless"
              placeholder="请输入 http:// 或 https:// 开头的网址"
              value={inputValue}
              onChange={handleChange}
            />
            <Button
              type="primary"
              className={styles['btn']}
              disabled={!enable}
              onClick={handleClick}
            >
              生成短链接
            </Button>
          </div>
          {resShow ? (
            <div className={styles['res']}>
              <Image
                preview={false}
                width={70}
                height={70}
                src={`data:image/png;base64,${data?.shortUrlQrCode}`}
                fallback=""
              />
              <Divider type="vertical" orientation="center" />
              <div style={{ width: 400 }}>
                <p className={styles['surl']}>短链接: {data?.shortUrl}</p>
                <p className={styles['lurl']}>
                  原始链接:
                  {inputValue}
                </p>
              </div>
              <Divider type="vertical" />
              <div className={styles['count']}>
                <EyeOutlined /> 访问次数：0
              </div>
            </div>
          ) : null}
          <div className={styles['bottom']}>
            <Image
              preview={false}
              width={1000}
              height={400}
              src="https://static.interval.im/xiaomark/img/bg.ac35842.png"
            />
          </div>
        </ProCard>
      </PageContainer>
    </>
  );
};

export default ShortLink;
